// 基础变量
$nd-min-width: 50px;
$nd-button-padding: 10px 14px;
$nd-button-border-radius: 4px;
$nd-button-font-size: 13px;
$nd-transition-duration: 0.3s;
$nd-ripple-duration: 600ms;
$nd-ripple-size: 20px;
$nd-opacity-active: 0.9;
$nd-opacity-disabled: 0.6;
$nd-loading-size: 10px;
$nd-loading-border-width: 2px;
$nd-loading-margin-right: 6px;

// 按钮基础样式变量
$button-types: (
    'default': (
        bg: var(--nd-color-default-3),
        color: var(--nd-color-default),
        border: var(--nd-color-default-2),
        hover-bg: var(--nd-color-default-3),
        hover-color: var(--nd-color-primary),
        hover-border: var(--nd-color-primary-2),
        disabled-bg: var(--nd-color-default-3),
        disabled-color: var(--nd-color-info),
        disabled-border: var(--nd-color-default-2)
    ),
    'primary': (
        bg: var(--nd-color-primary),
        color: var(--nd-color-default-3),
        border: var(--nd-color-primary),
        hover-bg: var(--nd-color-primary-4),
        hover-color: var(--nd-color-default-3),
        hover-border: var(--nd-color-primary-4),
        disabled-bg: var(--nd-color-primary-2),
        disabled-color: var(--nd-color-default-3),
        disabled-border: var(--nd-color-primary-2)
    ),
    'secondary': (
        bg: var(--nd-color-secondary),
        color: var(--nd-color-default-3),
        border: var(--nd-color-secondary),
        hover-bg: var(--nd-color-secondary-4),
        hover-color: var(--nd-color-default-3),
        hover-border: var(--nd-color-secondary-4),
        disabled-bg: var(--nd-color-secondary-2),
        disabled-color: var(--nd-color-default-3),
        disabled-border: var(--nd-color-secondary-2)
    ),
    'success': (
        bg: var(--nd-color-success),
        color: var(--nd-color-default-3),
        border: var(--nd-color-success),
        hover-bg: var(--nd-color-success-4),
        hover-color: var(--nd-color-default-3),
        hover-border: var(--nd-color-success-4),
        disabled-bg: var(--nd-color-success-2),
        disabled-color: var(--nd-color-default-3),
        disabled-border: var(--nd-color-success-2)
    ),
    'warning': (
        bg: var(--nd-color-warning),
        color: var(--nd-color-default-3),
        border: var(--nd-color-warning),
        hover-bg: var(--nd-color-warning-4),
        hover-color: var(--nd-color-default-3),
        hover-border: var(--nd-color-warning-4),
        disabled-bg: var(--nd-color-warning-2),
        disabled-color: var(--nd-color-default-3),
        disabled-border: var(--nd-color-warning-2)
    ),
    'error': (
        bg: var(--nd-color-error),
        color: var(--nd-color-default-3),
        border: var(--nd-color-error),
        hover-bg: var(--nd-color-error-4),
        hover-color: var(--nd-color-default-3),
        hover-border:  var(--nd-color-error-4),
        disabled-bg: var(--nd-color-error-2),
        disabled-color: var(--nd-color-default-3),
        disabled-border: var(--nd-color-error-2)
    ),
    'info': (
        bg: var(--nd-color-info),
        color: var(--nd-color-default-3),
        border: var(--nd-color-info),
        hover-bg: var(--nd-color-info-4),
        hover-color: var(--nd-color-default-3),
        hover-border: var(--nd-color-info-4),
        disabled-bg: var(--nd-color-info-2),
        disabled-color: var(--nd-color-default-3),
        disabled-border: var(--nd-color-info-2)
    )
);

// 朴素按钮样式变量（保持其他属性不变，只改动需要改的部分）
$plain-button-types: (
    'default': (
        bg: var(--nd-color-default-3),
        color: var(--nd-color-default),
        border: var(--nd-color-default-2),
        hover-bg: var(--nd-color-default-3),
        hover-color: var(--nd-color-primary),
        hover-border: var(--nd-color-primary),
        disabled-bg: var(--nd-color-default-3),
        disabled-color: var(--nd-color-info),
        disabled-border: var(--nd-color-default-2)
    ),
    'primary': (
        bg: var(--nd-color-primary-3),
        color: var(--nd-color-primary),
        border: var(--nd-color-primary-2),
        hover-bg: var(--nd-color-primary),
        hover-color: var(--nd-color-default-3),
        hover-border: var(--nd-color-primary),
        disabled-bg: var(--nd-color-primary-3),
        disabled-color: var(--nd-color-primary-2),
        disabled-border: var(--nd-color-primary-3)
    ),
    'secondary': (
        bg: var(--nd-color-secondary-3),
        color: var(--nd-color-secondary),
        border: var(--nd-color-secondary-2),
        hover-bg: var(--nd-color-secondary),
        hover-color: var(--nd-color-default-3),
        hover-border: var(--nd-color-secondary),
        disabled-bg: var(--nd-color-secondary-3),
        disabled-color: var(--nd-color-secondary-2),
        disabled-border: var(--nd-color-secondary-3)
    ),
    'success': (
        bg: var(--nd-color-success-3),
        color: var(--nd-color-success),
        border: var(--nd-color-success-2),
        hover-bg: var(--nd-color-success),
        hover-color: var(--nd-color-default-3),
        hover-border: var(--nd-color-success),
        disabled-bg: var(--nd-color-success-3),
        disabled-color: var(--nd-color-success-2),
        disabled-border: var(--nd-color-success-3)
    ),
    'warning': (
        bg: var(--nd-color-warning-3),
        color: var(--nd-color-warning),
        border: var(--nd-color-warning-2),
        hover-bg: var(--nd-color-warning),
        hover-color: var(--nd-color-default-3),
        hover-border: var(--nd-color-warning),
        disabled-bg: var(--nd-color-warning-3),
        disabled-color: var(--nd-color-warning-2),
        disabled-border: var(--nd-color-warning-3)
    ),
    'error': (
        bg: var(--nd-color-error-3),
        color: var(--nd-color-error),
        border: var(--nd-color-error-2),
        hover-bg: var(--nd-color-error),
        hover-color: var(--nd-color-default-3),
        hover-border: var(--nd-color-error),
        disabled-bg: var(--nd-color-error-3),
        disabled-color: var(--nd-color-error-2),
        disabled-border: var(--nd-color-error-3)
    ),
    'info': (
        bg: var(--nd-color-info-3),
        color: var(--nd-color-info),
        border: var(--nd-color-info-2),
        hover-bg: var(--nd-color-info),
        hover-color: var(--nd-color-default-3),
        hover-border: var(--nd-color-info),
        disabled-bg: var(--nd-color-info-3),
        disabled-color: var(--nd-color-info-2),
        disabled-border: var(--nd-color-info-3)
    )
);

.nd-button {
    position: relative;
    overflow: hidden;
    padding: $nd-button-padding;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all $nd-transition-duration;
    border-radius: $nd-button-border-radius;
    font-size: $nd-button-font-size;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: $nd-min-width;
     // 按钮内容
    &-content {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        
        &.is-loading {
            opacity: 0.75;
        }
    }
    
    // 加载图标
    &-loading-icon {
        display: inline-block;
        width: $nd-loading-size;
        height: $nd-loading-size;
        border: $nd-loading-border-width solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        margin-right: $nd-loading-margin-right;
        animation: nd-button-loading 1s infinite linear;
        vertical-align: -0.125em;
    }
    
    // loading状态
    &.is-loading {
        pointer-events: none;
    }
    // 基础按钮样式
    @each $type, $values in $button-types {
        &.nd-button--#{$type} {
            background: map-get($values, bg);
            color: map-get($values, color);
            border-color: map-get($values, border);
            
            &:hover:not(.is-disabled) {
                background: map-get($values, hover-bg);
                color: map-get($values, hover-color);
                border-color: map-get($values, hover-border);
            }
            
            &:active:not(.is-disabled) {
                opacity: $nd-opacity-active;
            }
            
            &.is-disabled, &.is-loading {
                background-color: map-get($values, disabled-bg);
                color: map-get($values, disabled-color);
                border-color: map-get($values, disabled-border);
            }
        }
    }
    
    // 朴素按钮样式
    &.is-plain {
        @each $type, $values in $plain-button-types {
            &.nd-button--#{$type} {
                background: map-get($values, bg);
                color: map-get($values, color);
                border-color: map-get($values, border);
                
                &:hover:not(.is-disabled) {
                    background: map-get($values, hover-bg);
                    color: map-get($values, hover-color);
                    border-color: map-get($values, hover-border);
                }
                
                &:active:not(.is-disabled) {
                    opacity: $nd-opacity-active;
                }
                
                &.is-disabled {
                    background-color: map-get($values, disabled-bg);
                    color: map-get($values, disabled-color);
                    border-color: map-get($values, disabled-border);
                }
            }
        }
    }
    
    // 禁用状态通用样式
    &.is-disabled {
        cursor: not-allowed;
        opacity: $nd-opacity-disabled;
        pointer-events: none;
    }
}

// 涟漪动画效果
@keyframes nd-ripple {
    to {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}
// 加载动画
@keyframes nd-button-loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.nd-ripple-effect {
    position: absolute;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    animation: nd-ripple $nd-ripple-duration linear;
    width: $nd-ripple-size;
    height: $nd-ripple-size;
}

// 过渡动画控制
.nd-ripple-enter-active {
    transition: opacity $nd-transition-duration;
}

.nd-ripple-leave-active {
    transition: opacity $nd-transition-duration;
}

.nd-ripple-enter-from,
.nd-ripple-leave-to {
    opacity: 0;
}